import { routerlist } from "../router/index";
import { Outlet,Link,useLocation } from "react-router-dom";
import { Layout,Menu } from "antd";
const { Header, Content, Footer, Sider } = Layout;

export const god=(routes)=>{
    return routes.map((route=>{
        const meneItem={
            label:route.meta.title,
            key:route.path
        }
        if(route.children){
            return {
                ...meneItem,
                children:god(route.children)
            }
        }
        return {
            ...meneItem,
            label:<Link to={route.path}>{route.meta.title}</Link>
        }
    }))
}

export default function Layouts(){
    const Location=useLocation()
    return(
        <Layout>
            <Sider style={{minHeight:'100vh'}}>
                <Menu theme='dark' mode='inline' selectedKeys={[Location.pathname]} items={god(routerlist)} />
            </Sider>
            <Content>
                <Outlet />
            </Content>
        </Layout>
    )
}